查看原文
其他

Apple人机界面指南的36个见解!

pursuer HMI设计 2022-05-28


Apple 为所有为 Apple 产品设计的设计师制定了指导方针,告诉他们如何做才能使应用程序对任何特定设备或软件更有用,他们称之为人机界面指南。


最近,,当我为不同的苹果操作系统(包括macOS、iOS和watchOS)设计我的第一个界面时,我使用了这些指导原则作为我的设计基础,是的,这些指南让我的设计不仅在外观方面而且在可用性方面更加出色。


所以,我决定给大家简单介绍一下这些指南,对于这篇文章,我将讨论一些帮助我构建更好设计的关键见解。


让我们从最重要的一个开始,那就是:


iOS 指导方针



iPhone 是最常用的 Apple 设备之一,因为它被大多数用户使用,iOS(iPhone 的操作系统)有自己的一套准则,Apple 希望每个设计师都遵循这些准则,以使应用程序在其平台上看起来和性能最佳, 这最终会帮助用户获得更好的用户体验。


让我们看看我在设计第一款iOS应用时发现的一些有用的指导原则。


1. 避免预先询问设置信息

“人们希望应用程序能够正常工作。为大多数用户设计你的应用程序,让少数想要不同配置的用户调整设置以满足他们的需求。尽可能地从设备设置和默认设置中获取设置信息,或者通过iCloud等同步服务获取设置信息。如果你必须询问设置信息,就提示用户在第一次打开应用时提供这些信息,然后让他们在应用设置中修改这些信息。”


在设计的初始阶段,确保你利用了所有可用的东西。例如,注册与苹果或谷歌选择效果最好等他们节省用户的时间进入细节的名字、年龄、联系电话,一次又一次获取的数据设置或iCloud是一个很好的的方式去节省用户的时间和精力,给一个更好的体验。


你只需要请求从用户的 iCloud id、iCloud 存储、设置等获取数据的权限。


2. 让学习变得有趣且易于发现

“边做边学比阅读说明清单更有趣、更有效,使用动画和交互性逐步进行教学。避免显示具有交互性的静态截图。”


另一个重要的步骤在设计一个更好的新员工培训的屏幕是你应该使你的应用的特性更有趣的学习和发现,最好的方法就是允许用户进入应用程序并尝试自己的事情,而静态文本解释的所有特性,在实践中学习是最有趣的学习方式。


3. 教育或娱乐以掩盖加载时间

“考虑呈现游戏玩法、有趣的视频序列或有趣的占位符图像。”


我们都讨厌加载,多亏了社交媒体,我们的注意力正在减少,为了确保你的用户不会在加载屏幕上感到无聊,用动画遮盖屏幕,数字、卡通、插图也与你的品牌和应用程序设计相匹配并且效果最佳。


4. 在有意义的时候使用模态

“只有在将人们的注意力集中在做出选择或执行与他们当前任务不同的任务上至关重要时,才能创建一种模态体验。模态体验将人们从他们当前的环境中解脱出来,需要采取行动来解除,所以只有当它能够提供明显的好处时才需要使用它。”


在用户最需要的时候,使用模型是一种吸引用户注意力的好方法,例如,在删除一个非常关键的文件时,请求删除许可可能会有帮助,但过度使用会让用户感到沮丧,所以要小心使用。


5.协调模态视图的外观与应用程序

当一个模态视图包含一个导航栏时,它应该使用与应用程序中的导航栏相同的外观。


根据你的应用程序设计模态,使模态看起来与用户一致,并被视为使设计看起来更好的应用程序的一部分。


6. 设计一种信息结构,使其能够快速轻松地获取内容

“以一种需要最少点击、滑动和屏幕的方式组织你的信息结构。”


作为构建导航应用程序的一部分,你应该设计应用程序,让用户尽可能快地获得信息或数据。这节省了用户的时间和精力,让用户感到高兴。


7. 在适当时提供设置的快捷方式

“如果你的应用程序包含引导用户进入设置的文本,比如“进入设置> MyApp > Privacy > Location Services,”提供一个按钮,自动打开该位置。”


一个小步骤,但我使用它每当我要求用户打开设置来调整一些东西,提供给用户在另一个应用程序内完成任务的方式是伟大的,因为它完成任务的时间更少。


8. 如果可能,给出选择

“尽可能高效地输入数据,考虑使用选择器或表格来代替文本字段,因为从预定义选项列表中进行选择比键入响应更容易。”


使用不同的元素,如时间选择器和下拉菜单等,可以让任务无缝衔接,让用户轻松完成任务。


9.考虑暂时隐藏导航栏以提供更身临其境的体验

“例如,当人们查看全屏照片时,照片会隐藏导航栏和其他界面元素。如果你实现了这种行为,让人们用一个简单的手势恢复导航栏,比如点击。”


如果它有助于提供一个全屏视图,让你的用户从图像、文本、文件等中获取更多信息,通过隐藏像导航栏这样的元素。


10. 当你想特别强调上下文时,使用大标题

“大标题永远不应该与内容竞争,但在某些应用程序中,大标题的粗体文本可以帮助人们在浏览和搜索时定位。例如,在选项卡式布局中,大标题可以帮助澄清活动选项卡并指示人们何时滚动到顶部。手机使用这种方法,而音乐使用大标题来区分专辑、艺术家、播放列表和广播等内容区域。在 iOS 13 及更高版本中,大标题导航栏默认不包含背景材质或阴影。”


我更喜欢在应用程序的屏幕上使用大标题,让用户注意到他们当前在哪个屏幕上。


11.避免永久隐藏状态栏

“没有状态栏,人们必须离开你的应用程序才能查看时间或查看他们是否有 Wi-Fi 连接。让人们通过使用简单、可发现的手势重新显示隐藏的状态栏。在照片应用程序中浏览全屏照片时,轻轻一点就会再次显示状态栏。”


隐藏状态栏以提供干净的全屏界面是观看视频和查看照片的必要条件,但重要的是允许用户通过滑动或点击查看电池百分比、wifi 连接等。


12. 考虑在滚动视图处于分页模式时显示页面控制元素

“页面控件显示有多少页面、屏幕或其他内容块可用,并指示当前可见的内容。如果你显示一个带有滚动视图的页面控件,请禁用同一轴上的滚动指示器以避免混淆。”


页面控制器可帮助用户区分滚动视图和页面视图,以便将其添加到你的屏幕上。


13. 配置一个按钮以在你需要提供有关未立即完成的操作的反馈时显示活动指示器。

“在按钮中显示活动指示器可以节省 UI 中的空间,同时清楚地传达延迟的原因。如果它有助于澄清正在发生的事情,你还可以将按钮配置为在活动指示器旁边显示不同的标签。例如,当活动指示器可见时,标签“Checkout”可能会更改为“Checking out...”。当人们点击ni配置的按钮后出现延迟时,系统会在原始标签或替代标签旁边显示活动指示器,隐藏按钮图像(如果有)。”


提供一个按钮,还显示像一个加载循环的反馈改变标签可以帮助用户在等待结果如果不显示任何反馈用户可能认为他没有点击它,它可能会让他按几次造成麻烦,所以最好提供反馈。


要阅读与 iOS 相关的更多指南,你可以点击下面的链接/框,它将引导你进入 Apple 人机界面指南网页的官方网站,该网页显示了这些指南以不同的标题和功能排列,以使事情更容易理解。


macOS 指南



几个月前,我通过为 Mac 和 Windows 等台式电脑应用程序来测试我的设计技巧。为了了解他们的基础知识,我阅读了它的指南,我发现其中一些指南非常有用。


我列出了我最喜欢的10条macOS应用程序指南。


1. 帮助人们估算完成一个流程需要多长时间

“用户并不总是需要准确地知道一项任务需要多长时间,但给他们一个估计是很重要的。至少要显示一个表示正在发生某事的活动微调器。理想情况下,应该显示一个明确的进度指示器和补充的描述性文本。例如,Finder结合了一个带有解释性文本的进度条来显示复制操作需要多长时间。


每当我设计一个应用程序界面时,我都会设计一个加载屏幕,我会根据屏幕显示百分比、旋转和旋转圆圈,以向用户显示正在发生的事情,这使我的 UI 在体验方面更好。


2.确保填充数据的准确性

“人们很欣赏为他们提供一些信息的便利,只要它是正确的。如果你不能保证你提供信息的准确性,最好将字段留空。”


我总是注意为用户提供正确的注册信息或信用卡相关信息。


3. 推迟在必需字段旁边显示必需指示符,直到用户试图继续而不输入值

“在每个必需的文本字段和选择控件旁边预先显示星号或自定义图标会使你的界面显得杂乱无章且没有吸引力。假设人们知道他们在做什么并将输入所有必需的值。如果他们忘记了一个,当他们试图退出当前上下文时,在忘记的字段旁边显示一个指示符。”


在我的 iOS 应用程序甚至 Android 应用程序中设计表单时,我更喜欢显示红色或自定义颜色的点来表示此字段是必需的。


4.动态验证字段值

“在填写完一份很长的表格后,你必须回去纠正错误,这是令人沮丧的。只要有可能,在输入后立即检查字段值,以便用户能够立即纠正它们。。”


作为一个用户,我也不喜欢仅仅因为之前遗漏了一些内容而重新填写表单,所以我们必须确保我没有对我的用户这样做。


5. 如果有意义,允许选择多个文件

“例如,如果你的应用程序包含图像插入功能,那么让用户一次插入多张图像可能是有用且高效的。”


在应用程序中添加图像选择器时,添加将多个文件一起添加的选项,例如,当我制作便笺应用程序时,我允许用户在便笺中添加多个图像。


6. 如果你的应用是基于文档的,启用自动保存

“一般来说,人们希望他们的内容在没有干预的情况下被连续保存。选择自动保存,这样他们就可以依赖你应用中的这些行为。”


在那个笔记应用程序中,我还添加了链接到 iCloud 的自动保存选项,这使得用户的数据对他们来说是安全的。


7. 如果你的应用程序可以保存为多种文件格式,则让用户选择一种输出格式。

当有输出格式时,可通过输出位置下方的弹出按钮显示。


对于mac应用程序来说,最好让用户选择输出格式,就像chrome浏览器一样,它允许用户通过改变现有格式来保存图像和视频。


8. 为人们经常做的事情定义新的键盘快捷键

“人们很难记住他们很少使用的捷径。最小化特定于应用程序的键盘快捷键还有助于避免与可能存在的其他系统范围快捷键的潜在冲突。”


Adobe 就是最好的例子,我每天都使用 adobe 的软件进行设计,它允许我在键盘快捷键的帮助下保存、编辑和选择不同的工具,这让设计师的生活更轻松。


9. 不要覆盖标准键盘快捷键

“如果用户知道的快捷方式在你的应用中以不同的方式运行,他们可能会感到困惑。只有在非常罕见的情况下,才有必要重新定义一个常见的快捷方式。例如,如果用户在你的应用中花费了大量时间,那么就有可能重新定义一个不适用于你的应用的标准快捷方式。另一个选择可能是让用户选择自己的键盘快捷方式。”


Adobe的软件使用相同的标准键盘快捷键来复制、粘贴或选择橡皮擦等,这是一个很好的例子。


10.当用户启动可能导致意外和不可逆转的数据丢失的任务时,发出警告


“这样的警告很重要,但与其他警报一样,如果它们出现得太频繁,它们就会失去影响。当数据丢失是预期结果时,不要警告用户。例如,Finder 不会在用户每次丢弃文件时都发出警告,因为删除文件是预期的结果。”


我更喜欢显示一个弹出式或模式,向用户显示这个任务很重要,并选择继续。


watchOS 指南



我发现苹果手表的设计非常可爱,但是当我开始设计自己的我发现各种错误因为我们所有设计师熟悉大屏幕,观看屏幕太小,设计屏幕是很困难的,因为只有重要的任务可以显示为其他东西没有空间。


为了更好地设计,我再次查看了指南,发现了一些非常酷的指南,让我的基本知识变得清晰,如果你决定为 Apple Watch 设计,那么一定要去阅读完整的指南。


1. 提供视觉反馈以响应 Digital Crown 交互

“例如,当人们使用 Digital Crown 时,选择器会更改当前显示的值。如果您直接跟踪旋转,使用你接收到的旋转数据以编程方式更新您的界面。如果你不提供视觉反馈,人们可能会认为旋转数字皇冠对应用没有影响。”


必须为你的应用更好地使用表冠,事实证明,表冠是一种很好的交互方式,因为屏幕很小并且任何其他交互都很重要。


2.专注于基本内容

“无论你选择哪种模式,包含太多内容页面都会使导航变得耗时且令人困惑。设计你的应用程序以实现快速便捷的交互。如果你的 watchOS 应用有 iPhone 配套应用,设计 watchOS 应用来补充你的 iPhone 应用,而不是模仿它。”


我也为手表和iPhone尝试了相同的设计,结果发现很难用相同的屏幕进行设计,如果我这样做了,它会降低我使用该应用程序的体验,这会教我为手表设计应用程序分别按照它的指导方针。


3. 避免创建比两三层更深的层次结构

“肤浅的等级制度让人们更容易快速找到自己想要的东西。包含超过两级或三级的信息可能会导致人们在导航时失去位置。”


由于屏幕尺寸很小,使应用程序的导航小有助于用户不需要深入很多,可以实现的结果。


4.支持人们可能想向他人展示的视图中的自动旋转。

“当人们转动手腕时,应用程序通常会通过使屏幕休眠来响应这个动作,但在某些情况下,自动旋转内容是有意义的。例如,佩戴者可能想向朋友展示图像,或向读者展示二维码。


当用户倾斜屏幕时,你的应用程序也应该随之倾斜,这是一个基本功能,但有时不启用此功能会使设计看起来很糟糕。


5. 避免在界面中并排放置两个或三个以上的控件

“作为一般规则,连续显示不超过三个包含字形的按钮或两个包含文本的按钮。虽然通常让文本按钮跨越屏幕的整个宽度会更好,但只要屏幕不滚动,两个带有短文本标签的并排按钮也可以很好地工作。”


避免在屏幕上放置许多按钮,因为屏幕大小会使用户点击不同的按钮。


6. 在你的应用程序中使用不超过一种额外的字体

“虽然watchOS支持自定义字体,但使用太多会让界面感觉混乱。此外,自定义字体在较小的字体大小下可能不那么容易辨认,而且它们不自动支持Dynamic Type等特性。人们将无法调整自定义字体的大小,除非你实现对它的支持。”


在应用程序设计中使用最少的字体,坚持使用最基本的字体。


7. 当项目总数可能不明显时,显示滚动指示器

滚动指示器反映了选择器中的项目总数,并指示了列表中的当前位置。当项目的顺序和数量很明显时,比如在为计时器指定秒数时,滚动指示器就没有必要了。”


当没有指定项目时,滚动指示器会有帮助。


8. 易读性设计

“为文本选择较轻的颜色,并使用动态类型,以确保文本可以适当调整大小。内置的文本样式提供了最佳的易读性,并自动支持动态类型。如果你需要使用自定义字体,避免使用过于风格化的字体。有关指导,请参阅排版。”


根据设计、外观和主题来选择配色方案是必须的。


9. 在有意义的情况下,将行数限制在20左右

“人们更容易浏览候选清单,但有时人们希望看到一长串项目。例如,如果人们订阅了大量的播客,如果他们无法查看所有项目,他们可能会认为有问题。你可以通过显示最相关的15到20个项目并为人们提供查看更多项目的方式来帮助使长列表更易于管理。”


10. 如果在你的应用中这样做有意义,改变默认标题

“如果 Cancel 在你的应用中无法正常工作,你可以更改标题以传达不同的含义。最常见的替代标题是 Done 和 Dismiss。不管你选择什么标题,系统总是以白色显示。”


我并没有真正编辑它,但有时如果你必须这样做,那就仔细做。


11. 不要将Cancel替换为“Back”或“<”或屏幕标题

“你不希望你的自定义标题误导人们,让他们认为这个页面是分层导航界面的一部分。”


取消按钮是用户使用的基本按钮,除了显示模态或弹出式按钮。


12. 谨慎使用提醒和行动表

警报和动作表单给人们提供了重要的信息和选择,但它们会中断当前的任务。为了鼓励人们注意你的提醒和动作表单,避免不必要地使用它们。”


提醒和行动是吸引用户注意力的好方法,不管他们是为了做些什么,还是为了推广,但如果超出限制,可能会让用户感到沮丧。


想要了解汽车更多内容,就拨打电话或微信留言联系我们吧!

 来源:Vikalp Kaushik

热线:010-56281131

文中部分图片来自网络,如侵权,请联系删除


- 服务内容 -



长按关注小程序,浏览更多精彩内容

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存